<template>
    <div class="app-container">
        <template>
            <h2 style="text-align: center;">公告详细信息</h2>

            <el-descriptions class="margin-top" title :column="2" :size="size" border>

                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                        <i class="el-icon-document fontI"></i>
                        <i class="fontI">公告标题</i>
                    </template>
                    <p class="sizesize style1">{{ annoInfo.title }}</p>
                </el-descriptions-item>

                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                        <i class="el-icon-picture-outline fontI"></i>
                        <i class="fontI">附属图片</i>
                    </template>
                    <div class="demo-image__preview" style="width: 70%;">
                        <el-image style="width: 100px; height: 100px" :src="annoInfo.image" :preview-src-list="srcList">
                        </el-image>
                    </div>
                </el-descriptions-item>

            </el-descriptions>

            <el-descriptions class="margin-top" title :column="2" :size="size" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                        <i class="el-icon-price-tag fontI"></i>
                        <i class="fontI">公告优先级</i>
                    </template>
                    <p class="sizesize">
                        <el-tag class="style1" size="big" type="warning">
                            <div v-if="annoInfo.priority == '1'">一级公告</div>
                            <div v-else-if="this.annoInfo.priority == '2'">二级公告</div>
                            <div v-else-if="annoInfo.priority == '3'">三级公告</div>
                        </el-tag>
                    </p>
                </el-descriptions-item>

                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                        <i class="el-icon-view fontI"></i>
                        <i class="fontI style1">阅读量</i>
                    </template>
                    <div class="demo-image__preview font2 style1">{{ annoInfo.viewCount }}
                    </div>
                </el-descriptions-item>


            </el-descriptions>

            <el-descriptions class="margin-top" title :column="1" :size="size" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                        <i class="el-icon-tickets fontI"></i>
                        <i class="fontI">公告内容</i>
                    </template>
                    <p class="style1">{{ annoInfo.contentText }}</p>
                </el-descriptions-item>

            </el-descriptions>










            <!-- 公告对象 -->
            <el-descriptions class="margin-top" title :column="1" :size="size" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                        <i class="el-icon-user fontI"></i>
                        <i class="fontI">公告对象</i>
                    </template>
                    <!--  -->
                    <div class="app-container">
                        <el-container style="height: 500px ; width: 1000px; border: 1px solid #eee">
                            <el-container>

                                <el-header style="text-align: left; font-size: 12px">

                                    <el-form :inline="true" style="margin-top: 0.6%; width: 700px;">
                                        <div style="width: 100px;"></div>

                                        <el-form-item>
                                            <el-input class="caozuo" size="medium" v-model="searchObj.userPhone"
                                                placeholder="手机号查询" />
                                        </el-form-item>


                                        <el-form-item>
                                            <el-input class="caozuo" size="medium" v-model="searchObj.userName"
                                                placeholder="姓名查询" />
                                        </el-form-item>

                                        <el-form-item label="">
                                            <el-select v-model="Pvalue" placeholder="是否阅读" size="medium" class="caozuo">
                                                <el-option v-for="item in prioritys" :key="item.Pvalue" :label="item.label"
                                                    :value="item.Pvalue">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>

                                        <el-form-item style="float: right;">
                                            <el-button size="medium" type="primary" icon="el-icon-search"
                                                @click="fetchData()">查询</el-button>
                                            <el-button size="medium" type="default" @click="resetData()">清空</el-button>
                                        </el-form-item>


                                    </el-form>
                                </el-header>

                                <el-main>
                                    <el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" style="width: 80%"
                                        @selection-change="handleSelectionChange">

                                        <el-table-column type="selection" width="55">
                                        </el-table-column>

                                        <el-table-column type="index" align="center" label="序号" width="130">
                                        </el-table-column>

                                        <el-table-column prop="nickname" label="姓名" width="130">
                                        </el-table-column>

                                        <el-table-column prop="mobile" label="手机号" width="160">
                                        </el-table-column>

                                        <el-table-column prop="flag" label="是否阅读" width="150" :formatter="parseStatus">
                                        </el-table-column>




                                        <!-- 操作栏 -->
                                        <el-table-column fixed="right" label="操作" width="100">
                                            <template slot-scope="scope">
                                                <div v-if="scope.row.flag == '0'">
                                                    <el-button @click="handleClick(scope.row)" type="success"
                                                        size="small">点击提醒</el-button>
                                                </div>

                                            </template>
                                        </el-table-column>

                                    </el-table>
                                    <div style="margin-top: 20px">
                                        <el-button type="success"
                                            @click="toggleSelection([tableData[0], tableData[1]])">选择所有未阅读</el-button>
                                        <el-button type="success" @click="toggleSelection()">提醒所有未阅读</el-button>
                                    </div>
                                </el-main>


                            </el-container>

                        </el-container>
                    </div>
                    <!--  -->
                </el-descriptions-item>

            </el-descriptions>












            <el-descriptions class="margin-top" title :column="1" :size="size" border>
                <el-descriptions-item :contentStyle='contentStyle' :labelStyle='labelStyle'>
                    <template slot="label">
                        <i class="el-icon-time fontI"></i>
                        <i class="fontI">发布时间</i>
                    </template>
                    <p class="style1">
                        {{ annoInfo.gmtCreate }}
                    </p>
                </el-descriptions-item>

            </el-descriptions>

        </template>
    </div>
</template>
  
<script>
import announcement from '@/api/edu/announcement'

export default {
    data() {
        return {
            annoId: '',
            annoInfo: {
                title: '',
                contentText: '',
                image: '',
                priority: '',
                gmtCreate: '',
                viewCount: '',
            },
            size: '',
            srcList: [
            ],
            // 
            searchObj: {
                userPhone: '',
                userName: '',
                flag: ''
            },
            // 查询条件
            // 公告优先级选择
            prioritys: [{
                Pvalue: '1',
                label: '已经阅读'
            }, {
                Pvalue: '0',
                label: '没有阅读'
            }],
            Pvalue: '',

            tableData: [],
            multipleSelection: [],

            // 自定义表格样式
            //内容样式
            contentStyle: {
                'text-align': 'left',

            },
            //label样式
            labelStyle: { 'width': '14%' },
        }
    },

    created() {
        // 获取到路由里面的id值
        if (this.$route.params && this.$route.params.id) {
            this.annoId = this.$route.params.id;
        }
        // 调用方法初始化
        this.selectInfo();
        this.fetchData();
    },

    methods: {
        // 查询公告基本信息
        selectInfo() {
            announcement.selectInfo(this.annoId).then(response => {
                this.annoInfo = response.data.anno;
                this.srcList.push(this.annoInfo.image);
            })
        },
        // 点击查询按钮执行的方法
        fetchData() { // 调用api层获取数据库中的数据
            // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
            // 解决分页无效问题
            this.searchObj.flag = this.Pvalue;
            announcement.selectUsers(this.annoId, this.searchObj).then(response => {
                // debugger 设置断点调试
                if (response.success === true) {
                    this.tableData = response.data.annoObjects;
                }
            })
        },
        // 点击清空按钮执行的方法
        resetData() {
            this.searchObj = {}
            this.Pvalue = '';
            this.fetchData()
        },
        // ------------------------------------------
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 点击提醒按钮执行的方法
        handleClick(row) {
            console.log("row.flag" + row.flag)
            this.$confirm('此操作将发送短信给用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                announcement.sendMsmToStu(row.mobile)
                    .then(response => {
                        // 提示信息
                        this.$message({
                            type: 'success',
                            message: '提醒成功!'
                        });
                        // 刷新页面
                        this.fetchData();
                    })
            })
        },
        // el-table里面的值转换
        parseStatus(row) {
            return row.flag == 0 ? '没有阅读' : row.flag == 1 ? '已经阅读' : '';
        }
        // ------------------------------------------
    }
}
</script>

<style scoped>
.style1 {
    font-style: normal;
    font-size: 18px;
}

.sizesize {
    width: 70%;
    width: 400px;
    height: 100px;
    text-align: left;
    margin-top: 10%;
}

.fontI {
    font-style: normal;
    color: black;
    font-size: 20px;
}

.font2 {
    width: 70%;
    width: 100px;
    height: 100px;
    margin-top: 50%;
    text-align: left;
}

/*  */
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}

.caozuo {
    width: 140px;
    margin-left: 10px;
}

/*  */

.ccInfo {
    background: #f5f5f5;
    padding: 20px;
    overflow: hidden;
    border: 1px dashed #DDD;
    margin-bottom: 40px;
    position: relative;
}

.ccInfo img {
    background: #d6d6d6;
    width: 500px;
    height: 278px;
    display: block;
    float: left;
    border: none;
}

.ccInfo .main {
    margin-left: 520px;
}

.ccInfo .main h2 {
    font-size: 28px;
    margin-bottom: 30px;
    line-height: 1;
    font-weight: normal;
}

.ccInfo .main p {
    margin-bottom: 10px;
    word-wrap: break-word;
    line-height: 24px;
    max-height: 48px;
    overflow: hidden;
}

.ccInfo .main p {
    margin-bottom: 10px;
    word-wrap: break-word;
    line-height: 24px;
    max-height: 48px;
    overflow: hidden;
}

.ccInfo .main h3 {
    left: 540px;
    bottom: 20px;
    line-height: 1;
    font-size: 28px;
    color: #d32f24;
    font-weight: normal;
    position: absolute;
}
</style>